---
name: Wait
route: /wait
menu: Utilities
---

import { Playground, Props } from 'docz';
import Wait from '../index';

# Wait

Is used to pause the execution of all child motions until all parent motions have completed.
Add it between two motions for the deeper descendant motion to start only after the previous one has finished.

> **Tip -** Not making complete sense?
> Have a look at [Wait for the previous motion to finish before starting the next](/advanced-usage#wait-for-the-previous-motion-to-finish-before-starting-the-next).

## Usage

```js
import Motion, { Wait, Move, CircleExpand } from '@element-motion/core';

export const AnimatedListItem = ({ id, children }) => (
  <Motion name={`list-item-${id}`}>
    <CircleExpand background="red">
      <Wait>
        <Move>{motion => <li {...motion}>{children}</li>}</Move>
      </Wait>
    </CircleExpand>
  </Motion>
);
```
